<template>
  <div>
    <div class="table-operator">
      <a-button
        v-if="!states&&(this.$route.query.id)"
        @click="showModal(1)"
        type="primary"
        icon="plus"
      >上传附件</a-button>
    </div>
    <!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect: onSelectS }" -->

    <a-table
      style="margin-top:20px;"
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      class="j-table-force-nowrap"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"></div>
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="showModal(record)" :disabled="states">编辑</a>
      </span>
      <span slot="actions" slot-scope="text, record">
        <a @click="onSelectS(record)">{{ record.jiSuanJiWenJianMing }}</a>
      </span>
      <span style="width:180px;" slot="remarks" slot-scope="text, record">
        <a class="remark" :title="record.xinXiXiTongMiaoShu">{{ record.xinXiXiTongMiaoShu }}</a>
      </span>
    </a-table>
    <!-- 新增表单 -->
    <a-modal
      title="上传附件"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :form="form">
        <a-row>
          <a-col :xs="24" :sm="12">
            <a-form-item label="上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-upload v-decorator="['wenjian']" :trigger-change="true"></j-upload>
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="12">
           
            <a-form-item label="附件类型：" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                
                v-decorator="['fuJianLeiXing', validatorRules.fuJianLeiXing]"
                :trigger-change="true"
                dictCode="fuJianLeiXing"
                    :multi="true"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="forms">
        <div class="item">
          <p>标题</p>
          <a-input placeholder="请输入扩展名" v-model="forms.jiSuanJiWenJianMing" />
        </div>

        <div class="item">
          <!-- <p><span>*</span> 附件类型</p>
          <div>
            <a-select default-value="1" style="width: 120px" @change="handleChange">
              <a-select-option value="1">
                主文件
              </a-select-option>
              <a-select-option value="2">
                副文件
              </a-select-option>
            </a-select>
          </div>-->
        </div>
        <div class="item">
          <p>扩展名</p>
          <a-input placeholder="请输入扩展名" v-model="forms.geShiXinXi" />
        </div>
        <div class="item">
          <p>
            <span>*</span> 页数
          </p>
          <a-input placeholder="请输入页数" v-model="forms.yeShu" />
        </div>
        <div class="item">
          <p>大小</p>
          <a-input placeholder="请输入大小" v-model="forms.jiSuanJiWenJianDaXiao" />
        </div>
        <div class="item">
          <p>备注</p>
          <a-textarea placeholder="请输入备注" auto-size v-model="forms.xinXiXiTongMiaoShu" />
        </div>
      </div>
    </a-modal>
    <div class="g-agreement-body" style="width:100%">
      <iframe :src="urlStr" style="width:100%;border:0;height:100vh"></iframe>
    </div>
  </div>
</template>

<script>
import pick from 'lodash.pick'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import '@/assets/less/TableExpand.less'
import JUpload from '@/components/jeecg/JUpload'

import { queryZhengWenList, zhengWenEdit, downloadFile } from '@/api/api'
import JDate from '@/components/jeecg/JDate'
var mammoth = require('mammoth')
export default {
  name: 'textList',
  mixins: [JeecgListMixin],
  components: {
    JUpload,
  },
  inject: ['reload'],
  data() {
    return {
      states: false,
      visible: false,
      confirmLoading: false,
      rowId: '',
      forms: {
         fuJianLeiXing: '',
        geShiXinXi: '',
        yeShu: '',
        jiSuanJiWenJianDaXiao: '',
        xinXiXiTongMiaoShu: '',
      },
      form: this.$form.createForm(this),
      headers: {
        authorization: 'authorization-text',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },

        {
          title: '文件名称',
          align: 'center',
          dataIndex: 'jiSuanJiWenJianMing',
          scopedSlots: { customRender: 'actions' },
        },
        {
          title: '附件类型',
          align: 'center',
          dataIndex: 'fuJianLeiXing_dictText',
        },
        {
          title: '扩展名',
          align: 'center',
          dataIndex: 'geShiXinXi',
        },
        {
          title: '页数',
          align: 'center',
          dataIndex: 'yeShu',
        },
        {
          title: '大小',
          align: 'center',
          dataIndex: 'jiSuanJiWenJianDaXiao',
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'xinXiXiTongMiaoShu',
          scopedSlots: { customRender: 'remarks' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 180,
          scopedSlots: { customRender: 'action' },
        },
      ],
      validatorRules: {
        fuJianLeiXing: {
          rules: [{ required: true, message: '请选择附件类型!' }],
        },
      },
      url: {
        list: '/wsWenShuDangAnController/zw/queryZhengWenList?log=1',
      },
      urlStr: '',
    }
  },
  created() {
    if (this.$route.query.type == 'true' || this.$route.query.type == true) {
      this.states = true
    }
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`)
      this.forms.fuJianLeiXing = value
    },
    //   新增表单
    showModal(val) {
      this.forms = {
        fuJianLeiXing: '',
        geShiXinXi: '',
        yeShu: '',
        jiSuanJiWenJianDaXiao: '',
        xinXiXiTongMiaoShu: '',
        xinXiXiTongMiaoShu: '',
      }
      this.visible = true
      if (val != 1) {
        this.forms = val
        this.rowId = val.id
      }
    },
    handleOk(e) {
      
      if (!this.forms.yeShu) {
        alert('页数没值')
        return
      }

      let obj = {
        wenJianLuJing: sessionStorage.getItem('filex'),
        wenShuHangBiaoShi: this.$route.query.id,
        jiSuanJiWenJianMing: sessionStorage.getItem('abc'),
        fuJianLeiXing: this.form.getFieldValue('fuJianLeiXing'),
        geShiXinXi: this.forms.geShiXinXi,
        yeShu: this.forms.yeShu,
        jiSuanJiWenJianDaXiao: this.forms.jiSuanJiWenJianDaXiao,
        xinXiXiTongMiaoShu: this.forms.xinXiXiTongMiaoShu,
      }
      
      if (this.rowId) {
        obj.id = this.rowId
      }
      zhengWenEdit(obj).then((res) => {
        if (res.success) {
          this.confirmLoading = true
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
          }, 2000)
          this.reload()
        }
      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    onSelectS(val) {
      console.log(val)
      this.urlStr = '/web/viewer.html?file=' + val.wenJianLuJing
    },
  },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.btn {
  width: 100%;
  text-align: right;
  margin: 10px 0;
  .ant-btn {
    margin-right: 30px;
  }
}
.forms {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  .item {
    display: flex;
    align-items: center;
    width: 50%;
    margin-top: 20px;
    p {
      width: 100px;
      text-align: center;
      span {
        color: #fc4949;
      }
    }
  }
}
.remark {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  color: #333;
}
</style>
